import React, { Component } from 'react';
import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
import * as font from '../util/size';

interface MarketItemProp {
    type: string
    nowPrice: string,
    amountTo: string,
    extent: string,
    color?: string,
    onPress?: Function
}



class MarketItem extends Component<MarketItemProp, any> {
    constructor(props) {
        super(props);
    }

    onPress = () => {
        if (this.props.onPress) {
            this.props.onPress();
        }
    }

    render() {
        const { type, nowPrice, amountTo, extent, color = 'red' } = this.props;
        let extentStyle = Number(extent) > 0 ? 'extentGreen' : 'extentRed';
        // const height = 50
        const itemHeight = font.scaleSize(136);
        return (
            <TouchableOpacity onPress={this.onPress} activeOpacity={0.7} style={{
                    height: itemHeight,
                    backgroundColor: '#FFFFFF'
                }}>
                <View style={{
                    height: itemHeight
                }}>
                    <Text style={{

                    }}>{type}</Text>
                    <View style={{

                    }}>
                        <Text style={{

                        }}>
                            {
                                nowPrice
                            }
                        </Text>
                        <Text style={{
                            
                        }}>
                            {
                                `$ ${amountTo}`
                            }
                        </Text>
                    </View>
                    <Text style={styles[extentStyle]}> {extent}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}


const itemHeight = font.scaleSize(136);

const styles = StyleSheet.create({
    container: {
        height: itemHeight
    },
    view: {
        height: itemHeight,
        display: 'flex', 
        flexDirection: 'row',
        backgroundColor: '#FFFFFF',
        // boxShadow: 'inset 0 -1px 0 0 #F2F2F2'
    },
    priceContent: {
        display: 'flex', 
        flexDirection: 'column',
    },
    nowPrice: {
        fontFamily: 'PingFangSC-Medium'
    },
    priceAmountTo: {

    },
    type: {
        flex: 2,
        lineHeight: font.scaleSize(44),
        fontFamily: 'PingFangSC-Medium',
        fontSize: font.scaleSize(32),
        color: '#666666'
    },
    extentGreen: {
        flex: 1,
        lineHeight: itemHeight 
    },
    extentRed: {
        flex: 1,
        lineHeight: itemHeight 
    }
})

export default MarketItem;